<!DOCTYPE html>
<html ng-app="myApp">

<head>
	<meta charset="utf-8">
</head>
<script src="angular-1.5.8/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="testCtrl">
      <roll-number nums="nums1"></roll-number>
  </div>
	<script>
    var app = angular.module("myApp", []);
    app.controller('testCtrl',function($scope){ 
      $scope.nums1 = ['4', '3', '9'] // 使用this.nums 赋值 传递给 子组件
      $scope.nums2 = ['6', '5', '4'] // 使用this.nums 赋值 传递给 子组件
    })
		app.directive('rollNumber', function() {
			return {
				restrict: 'AE',
				replace: 'true',
				templateUrl: './templates/rollNumber.html',
        scope: {
          nums: '=nums'
        },
        controller: function ($scope) {
          $scope.test = 'sss'
          $scope.rollList = ['', '', 'roll_1', 'roll_2', 'roll_3', 'roll_4', 'roll_5', 'roll_6', 'roll_7', 'roll_8', 'roll_9']
          // $scope.nums = ['0', '1', '2']
        }
			};
		});
	</script>

</body>
<style>
    .text-box {
      height: 100px;
      width: 100px;
      overflow: hidden;
      background: black;
      color: #fff;
    }
    .roll div {
      height: 100px;
      font-size: 80px;
      line-height: 100px;
    }
    .roll_1 {
      animation: roll_1 3s forwards; /* Safari 与 Chrome */
    }
  
    .roll_2 {
      animation: roll_2 3s forwards; /* Safari 与 Chrome */
    }
    .roll_3 {
      animation: roll_3 3s forwards; /* Safari 与 Chrome */
    }
    .roll_4 {
      animation: roll_4 3s forwards; /* Safari 与 Chrome */
    }
    .roll_5 {
      animation: roll_5 3s forwards; /* Safari 与 Chrome */
    }
    .roll_6 {
      animation: roll_6 3s forwards; /* Safari 与 Chrome */
    }
    .roll_7 {
      animation: roll_7 3s forwards; /* Safari 与 Chrome */
    }
  
    .roll_8 {
      animation: roll_8 3s forwards; /* Safari 与 Chrome */
    }
  
    /*省略roll_2——roll_8*/
  
    .roll_9 {
      animation: roll_9 3s forwards; /* Safari 与 Chrome */
    }
  
    @keyframes roll_1 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -100px, 0);
      }
    }
  
      @keyframes roll_2 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -200px, 0);
      }
    }
  
    @keyframes roll_3 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -300px, 0);
      }
    }
  
    @keyframes roll_4 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -400px, 0);
      }
    }
  
    @keyframes roll_5 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -500px, 0);
      }
    }
  
    @keyframes roll_6 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -600px, 0);
      }
    }
  
    @keyframes roll_7 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -700px, 0);
      }
    }
  
    @keyframes roll_8 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -800px, 0);
      }
    }
  
      /*省略roll_2——roll_8*/
  
    @keyframes roll_9 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -900px, 0);
      }
    }
    </style>
</html>